<template>
	<view class="container" :style="'min-height:'+height+'px'">
		<!-- #ifdef MP -->
		<div class="sharebtn" >
			<image src="/static/icon/share.png" @click="share"></image>
			<button open-type="share"></button>
		</div>
		<!-- #endif -->
		<view class="video-cont">
			<!-- #ifdef MP -->
			<view class="change-box" @click="showvideo = !showvideo" v-if="dataInfo.monitorUrl">
				<image src="/static/icon/change.png" class="change-img"></image>
			</view>
			<video class="video" autoplay v-show="showvideo" v-if="dataInfo.monitorUrl" :src="dataInfo.monitorUrl"></video>
			<view v-show="!showvideo" class="video common-bg-img" :style="'background-image:url('+dataInfo.defaultImageUrl+')'"></view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="change-box" @click="showvideo = !showvideo" v-if="dataInfo.ezvizUrl">
				<image src="/static/icon/change.png" class="change-img"></image>
			</view>
			<EZUIKitJs :isshow="showvideo" v-show="showvideo" v-if="dataInfo.ezvizUrl" :token="dataInfo.accessToken" :url="dataInfo.ezvizUrl" />
			<view v-show="!showvideo" class="video common-bg-img" :style="'background-image:url('+dataInfo.defaultImageUrl+')'"></view>
			<!-- #endif -->
		</view>
		<view class="intro-box common-box">
			<view class="item spaceBetween">
				<text class="title">{{dataInfo.title}}</text>
				<view class="bottomFlex">
					<image class="symbol" src="/static/icon/symbol.png"></image>
					<text class="price">{{dataInfo.price / 100.0}}</text>
					<text class="normal-text">元</text>
				</view>
			</view>
			<view class="item flexVerticle">
				<image class="location" src="/static/icon/location.png"></image>
				<text class="intro">{{dataInfo.treeNo.address}}</text>
			</view>
			<view class="item flexVerticle">
				<text class="normal-text">种植基地：</text>
				<text class="intro">{{dataInfo.treeNo.province + dataInfo.treeNo.city}}</text>
				<!-- <text class="intro flexRightbox">最少配送{{dataInfo.leastNums}}次</text> -->
			</view>
			<view class="status" v-if="item.isTree==1">已租</view>
			<view class="status" v-if="item.isTree==0">未租</view>
		</view>
	 	<view class="data-list common-box">
			<view class="subtitle">实时数据</view>
			<view class="cont-box spaceBetween">
				<view class="item" v-if="dataInfo.treeDO.moisture">
					<view>水分</view>
					<image src="/static/icon/shuifen.png" mode="aspectFit"></image>
					<view class="bold">{{dataInfo.treeDO.moisture}}%</view>
				</view>
				<view class="item" v-if="dataInfo.treeDO.temp">
					<view>温度</view>
					<image src="/static/icon/wendu.png" mode="aspectFit"></image>
					<view class="bold">{{dataInfo.treeDO.temp}}&#176;C</view>
				</view>
				<view class="item" v-if="dataInfo.treeDO.co2">
					<view>二氧化碳</view>
					<image src="/static/icon/eyht.png" mode="aspectFit"></image>
					<view class="bold">{{dataInfo.treeDO.co2}}ppm</view>
				</view>
				<view class="item" v-if="dataInfo.treeDO.illumination">
					<view>光照</view>
					<image src="/static/icon/guangzhao.png" mode="aspectFit"></image>
					<view class="bold">{{dataInfo.treeDO.illumination}}lux</view>
				</view>
			</view>
			<view class="subtitle hasmt" >植作物</view>
			<view class="cont-box" >
				<view class="spaceBetween" >
					<view class="item-new flexVerticle">
						<view class="img-item common-bg-img"></view>
						<view>
							<view class="normal">{{dataInfo.title}}</view>
							<view class="intro" v-if="dataInfo.lowYield">预估产量：</view>
							<view class="intro" v-if="dataInfo.lowYield"><text v-if="dataInfo.lowYield">{{dataInfo.lowYield}}kg</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="common-box parse-box">
			<view class="title">认购流程</view>
			<u-parse className="rich-img" :content="dataInfo.text"></u-parse>
		</view>
		<view class="bottom-fixed">
			<view class="inner flexVerticle">
				<text>合计：</text>
				<image class="symbol" src="/static/icon/symbol.png"></image>
				<text class="price">{{totalprice / 100.0}}</text>
				<view class="btn-box common-bg-btn centerFlex flexRightbox" @click="gotoConfirm">去结算</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	import EZUIKitJs from '@/components/EZUIKitJs.vue'
	export default {
		components: {
			uParse,
			EZUIKitJs
		},
		data() {
			return {
				treeDetailId:'',
				height:0,
		 		dataInfo:{},
			 	totalprice:0,
				isCheckLandId:[],
				seed:[],
				showvideo:false,
			};
		},
		onShow() {
			
		},
		onLoad(options) {
			const that = this
			this.height = uni.getSystemInfoSync().windowHeight
			that.treeDetailId = options.id
			this.loadData()
		},
		onShareAppMessage() {
			const that = this
			return {
				title: '果王来了',
				imageUrl: 'https://shopmalling-asset.oss-cn-hangzhou.aliyuncs.com/share.jpg',
				path: '/pages/enterprise/index'
			}
		},
		methods: {
			async loadData() {
				const that = this
				uni.showLoading({
					title: '正在加载'
				})
				that.$api.request('tree', 'treeDetail',{id:that.treeDetailId},failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					let data = res.data
					const regex = new RegExp('<img','gi');
					const regex_p = new RegExp('<p','gi');
					data.text = data.text.replace(regex,'<img style="max-width:100%;height:auto;"');
					data.text = data.text.replace(regex_p,'<p style="margin-top:35upx;"');
					that.dataInfo = data
				 	uni.hideLoading()
				})
			},
			gotoConfirm(){
				let that = this
				that.$api.request('treeOrder', 'form',{landIds:that.dataInfo.id,title:that.dataInfo.title,price:that.totalprice},failres => {
					that.$api.msg(failres.errmsg)
				}).then(res => {
					uni.setStorageSync("orderdata",res.data)
					uni.navigateTo({
						url:'/pages/order/confirm'
					})
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container{
		padding:0 15px 150upx;
		background-color: #F9F9F9;
	}
	.sharebtn{
		position: fixed;
		top:50%;
		right:0;
		z-index: 9;
		image{
			width:146upx;
			height: 146upx;
		}
		button{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 1;
		}
	}
	.video-cont{
		position: relative;
		margin-top: 22upx;
		.video{
			width:100%;
			height: 356upx;
			border-radius: 20upx;
		}
		.change-box{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			position:absolute;
			left:-15px;
			top:0;
			width: 120upx;
			height: 90upx;
			z-index: 9;
			border-top-right-radius: 100%;
			border-bottom-right-radius: 100%;
			background-color: rgba(0,0,0,0.8);
			.change-img{
				width: 90upx;
				height: 90upx;
			}
		}
	}
	.common-box{
		margin-top: 22upx;
		background:rgba(255,255,255,1);
		border-radius:20upx;
	}
	.intro-box{
		padding:50upx;
		.item:not(:first-child){
			margin-top: 23upx;
		}
		.title{
			color: #333333;
			font-size: 30upx;
			font-weight: bold;
		}
		.symbol{
			width:20upx;
			height: 20upx;
			margin:0 8upx 8upx 0;
		}
		.price{
			color: #FF4E00;
			font-size: 40upx;
			line-height: 1;
		}
		.normal-text{
			font-size: 24upx;
			color: #666666;
		}
		.intro{
			font-size: 24upx;
			color: #333333;
		}
		.location{
			width:24upx;
			height: 28upx;
			margin-right:14upx;
		}
	}
	.tab-bar-list{
		padding:30upx 0 20upx;
		.item{
			width:108upx;
			height: 44upx;
			font-size: 30upx;
			color: #999999;
			&.active{
				color: #009D44;
				border:2upx solid #009D44;
				border-radius: 60upx;
				font-weight: bold;
			}
			&:not(:last-child){
				margin-right:20upx;
			}
		}
	}
	.slc-list{
		padding:34upx 40upx 80upx;
	}
	.land-list{
		margin-top: 30upx;
		height: 236upx;
		.list-cont{
			white-space: nowrap;
			&:nth-child(1){
				margin-bottom: 12upx;
			}
		}
		.item{
			position: relative;
			display: inline-block;
			vertical-align: top;
			width: 200upx;
			height: 112upx;
			background-color: #000;
			margin-right: 15upx;
			.mask{
				position: absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;
				background-color: rgba(0,0,0,.1);
				z-index: 1;
			}
			.status{
				position: absolute;
				top:0;
				left:0;
				width:64upx;
				height: 34upx;
				display: flex;
				align-items: center;
				justify-content: center;
				background:rgba(0,157,68,1);
				border-radius:0px 0px 20upx 0px;
				font-size: 20upx;
				color: #ffffff;
				z-index: 2;
				&.slced{
					background-color: #FD7716;
				}
				&.disabled{
					background-color:#EEEEEE;
					color: #333333;
				}
			}
			.area{
				position: absolute;
				top:50%;
				left:50%;
				transform: translate(-50%,-50%);
				font-size:36upx;
				font-weight: bold;
				color: #ffffff;
				z-index: 2;
			}
			.slc-btn{
				position: absolute;
				right:8upx;
				bottom:8upx;
				width:32upx;
				height:32upx;
				z-index: 2;
			}
		}
	}
	.data-list{
		padding:40upx;
		.subtitle{
			font-size: 36upx;
			color: #333333;
			font-weight: bold;
			&.hasmt{
				margin-top: 83upx;
			}
		}
		.cont-box{
			margin-top: 40upx;
			.item{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 24upx;
				color: #333333;
				image{
					width:40upx;
					height: 40upx;
					margin:26upx 0 34upx;
				}
			}
			.bold{
				font-weight: bold;
			}
			.item-new{
				width:50%;
				.img-item{
					width:120upx;
					height:120upx;
					border-radius: 50%;
					margin-right: 20upx;
					border:2upx solid #f0f0f0;
				}
				.normal{
					margin-bottom: 15upx;
					color: #333333;
					font-size: 30upx;
					font-weight: bold;
					line-height: 1;
				}
				.intro{
					font-size:24upx;
					color: #666666;
					line-height: 1;
				}
				.power{
					vertical-align:super;
				}
				&:nth-child(n){
					margin-bottom:57upx;
				}
			}
		}
	}
	.parse-box{
		padding:50upx 32upx;
		.title{
			margin-bottom:30upx;
			font-size: 36upx;
			color: #333;
			font-weight: bold;
			text-align: center;
		}
		.rich-img{
			font-size: 24upx;
			color: #666666;
			text-align:justify;
			line-height: 40upx;
		}
	}
	.bottom-fixed{
		position: fixed;
		bottom:0;
		left: 0;
		width:100%;
		padding-bottom: 20upx;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);
		font-size: 30upx;
		color: #333333;
		background-color: #fff;
		box-shadow:0px 3upx 29upx 0px rgba(196, 196, 196, 0.35);
		.inner{
			padding:20upx 50upx;
		}
		.symbol{
			width:30upx;
			height:30upx;
			margin:0 10upx 0 20upx;
		}
		.price{
			font-size: 40upx;
			color: #FF4E00;
		}
		.btn-box{
			width:243upx;
			height:60upx;
			border-radius:30upx;
			font-size: 36upx;
			color: #fff;
			letter-spacing: 10upx;
			line-height: 1;
		}
	}
	.spaceBetween{
		flex-wrap: wrap;
	}
</style>
